import { defineComponent, reactive, ref, toRefs } from 'vue'
import { NForm, NFormItem, NModal, FormRules, NInputNumber } from 'naive-ui'
import { Response } from '@/service/modules/common/types'
import { useRole } from '../../user/common/use-role'
import { setDbSizeReq } from '@/service/modules/data-manage'

const SetHiveDbSizeModal = defineComponent({
  name: 'SetHiveDbSizeModal',
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    username: {
      type: String,
      default: null
    },
    proName: {
      type: String,
      default: null
    }
  },
  emits: ['modalShowChange'],
  setup() {
    const state = reactive({
      form: {
        username: '',
        size: 1
      },
      positiveButtonDisabled: ref(false),
      rules: {
        size: {
          trigger: ['input', 'blur'],
          required: true,
          validator() {
            if (state.form.size <= 0) {
              return new Error(window.$t('dataManage.dbSizeTips'))
            }
          }
        }
      } as FormRules
    })
    //系统角色下拉选项
    const { roleVariables, getRoleOptions } = useRole()
    getRoleOptions(0)
    return {
      ...toRefs(state),
      roleVariables
    }
  },
  methods: {
    async onPositiveClick() {
      //输入框存在为空时则确认按钮无效
      if (this.form.size <= 0) {
        return
      }
      //提交创建用户请求
      this.positiveButtonDisabled = true
      const res: Response<any> = await setDbSizeReq({
        proName: this.proName,
        username: this.username,
        size: this.form.size
      }).catch(() => {
        this.positiveButtonDisabled = false
      })
      if (res.resp_code === 0) {
        this.initData()
        this.$emit('modalShowChange', false)
        this.positiveButtonDisabled = false
      } else {
        this.positiveButtonDisabled = false
      }
    },
    onNegativeClick() {
      this.initData()
      this.$emit('modalShowChange', false)
    },
    initData() {
      this.form.size = 1
    }
  },
  render() {
    return (
      <NModal
        show={this.showModal}
        mask-closable={false}
        style='width: 400px'
        title={window.$t('dataManage.setHiveDbSize')}
        bordered={false}
        size='huge'
        preset='dialog'
        positive-text={window.$t('dialog.positiveText')}
        negative-text={window.$t('dialog.negativeText')}
        onPositiveClick={this.onPositiveClick}
        onNegativeClick={this.onNegativeClick}
        positiveButtonProps={{
          disabled: this.positiveButtonDisabled || this.form.size <= 0
        }}
        onClose={this.onNegativeClick}
      >
        <NForm
          rules={this.rules}
          label-placement='left'
          require-mark-placement='right-hanging'
          label-width='auto'
        >
          <NFormItem path='size' label={window.$t('dataManage.dbSize')}>
            <NInputNumber v-model:value={this.form.size} clearable>
              {{ suffix: 'G' }}
            </NInputNumber>
          </NFormItem>
        </NForm>
      </NModal>
    )
  }
})

export default SetHiveDbSizeModal
